<template>
  <div class="contents">
    <el-form :inline="true" :model="formInline">
      <el-form-item label="筛选：">
        <el-select
          v-model="formInline.region"
          placeholder="是否标品"
          class="selectWidth"
        >
          <el-option label="区域一" value="shanghai"></el-option>
          <el-option label="区域二" value="beijing"></el-option>
        </el-select>
        <el-select
          v-model="formInline.region"
          placeholder="分拣状态"
          class="selectWidth"
        >
          <el-option label="区域一" value="shanghai"></el-option>
          <el-option label="区域二" value="beijing"></el-option>
        </el-select>
        <el-select
          v-model="formInline.region"
          placeholder="选择线路"
          class="selectWidth"
        >
          <el-option label="区域一" value="shanghai"></el-option>
          <el-option label="区域二" value="beijing"></el-option>
        </el-select>
        <el-select
          v-model="formInline.region"
          placeholder="收货时间"
          class="selectWidth"
        >
          <el-option label="区域一" value="shanghai"></el-option>
          <el-option label="区域二" value="beijing"></el-option>
        </el-select>
        <el-select
          v-model="formInline.region"
          placeholder="默认库房"
          class="selectWidth"
        >
          <el-option label="区域一" value="shanghai"></el-option>
          <el-option label="区域二" value="beijing"></el-option>
        </el-select>
        <el-select
          v-model="formInline.region"
          placeholder="是否有备注"
          class="selectWidth"
        >
          <el-option label="区域一" value="shanghai"></el-option>
          <el-option label="区域二" value="beijing"></el-option>
        </el-select>
        <br />
        <div class="dis-flex">
          <el-select
            v-model="formInline.region"
            placeholder="全部分类"
            style="margin-top: 5px;"
          >
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
          <div style="display: flex; align-items: center;">
            <el-checkbox>不打印标签</el-checkbox>
            <tooltip-msg
              messages="此功能只会影响在分拣时是否打印标签"
              place="left"
            />
          </div>
        </div>
      </el-form-item>

      <el-form-item label="查询：">
        <div style="display: flex;">
          <el-select
            v-model="formInline.region"
            placeholder="联系人"
            style="width: 85px; margin-right: 5px;"
          >
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
          <el-input style="width: 180px;"></el-input>
        </div>
      </el-form-item>
      <el-form-item label="发货日期：">
        <el-date-picker
          v-model="value1"
          type="date"
          placeholder="选择日期"
        ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary">查询</el-button>
      </el-form-item>
      <el-form-item label="分拣阈值">
        <el-select
          v-model="formInline.region"
          placeholder="全部商品"
          style="width: 100px;"
        >
          <el-option label="区域一" value="shanghai"></el-option>
          <el-option label="区域二" value="beijing"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div style="position: fixed; top: 15px; right: 350px; z-index: 9999;">
      <el-button>一键打印</el-button>
      <el-button @click="drawer = true">表头设置</el-button>
      <el-button>打印所有拣货单</el-button>
    </div>
    <el-drawer title="选择表头显示列" :visible.sync="drawer" :modal="false" :show-close="false">
      <span>表头名称!</span>
    </el-drawer>
    <el-table :data="table1" style="width: 100%;">
      <el-table-column width="50px">
        <template slot="header" slot-scope>
          <i class="el-icon-s-operation"></i>
        </template>
      </el-table-column>
      <el-table-column prop="address" label="商品名称"></el-table-column>
      <el-table-column prop="address" label="库区/库位"></el-table-column>
      <el-table-column prop="address" label="客户名称"></el-table-column>
      <el-table-column prop="address" label="订购数量"></el-table-column>
      <el-table-column prop="address" label="实际数量"></el-table-column>
      <el-table-column prop="address" label="生产日期"></el-table-column>
      <el-table-column prop="address" label="操作"></el-table-column>
    </el-table>
    <el-pagination
      background
      layout="total, prev, pager, next,sizes, jumper"
      :page-size="10"
      :page-sizes="[10, 15, 20, 50, 100]"
      style="text-align: left;"
      :total="0"
    />
  </div>
</template>

<script>
  import TooltipMsg from '@/components/TooltipMsg.vue'
  export default {
    components: {
      TooltipMsg,
    },
    data() {
      return {
        formInline: {},
        table1: [],
        value1: '',
        drawer: false
      }
    },
  }
</script>

<style lang="scss" scoped>
  .contents {
    padding: 5px 20px 0;

    .selectWidth {
      width: 140px;
      margin-right: 5px;
    }

    .dis-flex {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
  }
</style>
